<template>
    <div>
                <!-- 轮播图部分 -->
        <div class="box4">
          <el-carousel trigger="click" height="460px">
            <el-carousel-item v-for="(item, index) in imglist" :key="index">
              <img :src="`http://101.132.181.9/api/${item.imgPath}`" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 手机 -->
        <p>手机</p>
        <div class="box5">
          <div class="a1">
            <img src="/imgs/phone.png" alt="" class="phone" />
          </div>
          <ul class="telbox">
            <li class="l3" v-for="(item, index) in tellist" :key="index"
            @click="go(item.product_id)"
            >
              <img
                :src="`http://101.132.181.9/api/${item.product_picture}`"
                alt=""
                class="tel_img"
                
              />
              <p class="s1">{{ item.product_name }}</p>
              <p class="s1">{{ item.product_title }}</p>
              <span class="s1" style="color: red"
                >{{ item.product_price }}元</span
              >
              <s class="s2">{{ item.product_selling_price }}</s>
            </li>
            <li class="l4" @click="$router.push('/goods')">浏览更多》</li>
          </ul>
        </div>
        <!-- 家电部分 -->
        <div class="jd" >
          <span class="j1"  @mousemove="mousetv">家电</span>
          <span class="r1" >电视影音</span>
          <span class="r1" >热门</span>
        </div>
        <div class="box6">
          <div class="a2">
            <div class="b1">
              <img src="/imgs/appliance-promo1.png" alt="" class="promo1" />
            </div>
            <div class="b2">
              <img src="/imgs/appliance-promo2.png" alt="" class="promo1" />
            </div>
          </div>
          <ul class="box_jd">
            <li class="li3" v-for="(item, index) in applianlist" :key="index" @click="go(item.product_id)">
              <img
                :src="`http://101.132.181.9/api/${item.product_picture}`"
                alt=""
                class="appimg"
              />
              <p class="s1">{{ item.product_name }}</p>
              <p class="s1">{{ item.product_title }}</p>
              <span class="s1" style="color: red"
                >{{ item.product_price }}元</span
              >
              <s class="s2">{{ item.product_selling_price }}</s>
            </li>
            <li class="li4" @click="$router.push('/goods')">浏览更多》</li>
          </ul>
        </div>
        <!-- 配件部分 -->
        <div class="jd">
          <span class="r1">充电器</span>
          <span class="r1">保护套</span>
          <span class="r1">热门</span>
        </div>
        <div class="box6">
          <div class="a2">
            <div class="b1">
              <img src="/imgs/accessory-promo1.png" alt="" class="promo1" />
            </div>
            <div class="b2">
              <img src="/imgs/accessory-promo2.png" alt="" class="promo1" />
            </div>
          </div>
          <ul class="box_jd">
            <li class="li3" v-for="(item, index) in partslist" :key="index" @click="go(item.product_id)">
              <img
                :src="`http://101.132.181.9/api/${item.product_picture}`"
                alt=""
                class="appimg"
              />
              <p class="s1">{{ item.product_name }}</p>
              <p class="s1">{{ item.product_title }}</p>
              <span class="s1" style="color: red"
                >{{ item.product_price }}元</span
              >
              <s class="s2">{{ item.product_selling_price }}</s>
            </li>
            <li class="li4" @click="$router.push('/goods')">浏览更多》</li>
          </ul>
        </div>
    </div>
</template>
<script>
import { baanrList, phonelist, applist, partlist } from "@/utils/api";
export default {
  data() {
    return {
      show:true,
      activeName: "",
      imglist: [], //存放轮播图图片
      tellist: [], //存放手机区域图片
      applianlist: [], //存放热门列表
      partslist: [], // 存放热门配件列表
    };
  },
   mounted() {
    this.getbaanr(); // 轮播图
    this.getphone(); // 手机部分
    this.getapp(); //家电热门部分
    this.getparts(); //配件热门
  },
  methods: {

    // 点击图片跳转到商品详情页
    go(id){
      console.log(id);
       this.$router.push('/detailed?productID='+id)
    },
    //  获取轮播图图片
    async getbaanr() {
      var res = await baanrList();
      console.log(res);
      this.imglist = res.data.carousel;
    },
    // 获取手机区域图片
    async getphone() {
      var res = await phonelist();
      console.log(8989, res);
      this.tellist = res.data.Product;
    },
    //获取家点热门区域图片
    async getapp() {
      var res = await applist();
      // console.log(9999, res);
      this.applianlist = res.data.Product;
    },

    // 获取配件热门区域
    async getparts() {
      var res = await partlist();
      //  console.log(777,res);
      this.partslist = res.data.Product;
    },

    async mousetv(){
      // 请求家电 电视接口
      this.show = false
      console.log(this.show1);
    },
    // 请求家电 电影电视接口
    //  async listshow(){
    //    var res = await 
    //  }
  },

};
</script>
<style lang="scss">
    .box5 {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.a1 {
  width: 20%;
  background: rgb(250, 245, 245);
}
p {
  font-size: 30px;
  font-weight: 300;
}
.telbox {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgb(250, 245, 245);
}
.l3 {
  width: 22%;
  height: 280px;
  margin-top: 10px;
  margin-right: 8px;
  background: white;
}
.l3:hover {
  transform: scale(1.01);
  transition: all 0.3s linear;
  box-shadow: 0 0 20px #b0b0b0;
}
.phone {
  width: 100%;
  height: 580px;
  margin-top: 10px;
}
.tel_img {
  width: 100%;
}
.promoimg {
  width: 100%;
}
.s1 {
  font-size: 13px;
  margin-top: 5px;
  margin-left: 40px;
}
.s2 {
  font-size: 10px;
  color: #ccc;
  margin-left: 41px;
}
.l4 {
  text-align: center;
  line-height: 280px;
  color: black;
  font-size: 17px;
  font-weight: 500;
  width: 22%;
  height: 280px;
  background: white;
  margin-right: 10px;
  margin-top: 10px;
}
.box6 {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.a2 {
  width: 20%;
  background: rgb(250, 245, 245);
}
.box_jd {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgb(250, 245, 245);
  text-align: center;
}
.li3 {
  width: 22%;
  height: 280px;
  margin-top: 10px;
  margin-right: 8px;
  background: white;
}
.li3:hover {
  transform: scale(1.01);
  transition: all 0.3s linear;
  box-shadow: 0 0 20px #b0b0b0;
}
.b1 {
  width: 100%;
  height: 48%;
  background: plum;
  margin-top: 7px;
}
.b1:hover {
  transform: scale(1.01);
  transition: all 0.3s linear;
  box-shadow: 0 0 20px #b0b0b0;
}
.b2 {
  width: 100%;
  height: 48%;
  background: plum;
  margin-top: 7px;
}
.b2:hover {
  transform: scale(1.01);
  transition: all 0.3s linear;
  box-shadow: 0 0 20px #b0b0b0;
}
.promo1 {
  width: 100%;
  height: 100%;
}
.appimg {
  width: 100%;
  height: 70%;
}
.li4 {
  text-align: center;
  line-height: 280px;
  color: black;
  font-size: 17px;
  width: 22%;
  height: 280px;
  background: white;
  margin-top: 10px;
  margin-right: 10px;
}

.accessory {
  width: 100%;
  height: 100%;
}
.r1 {
  float: right;
  margin-right: 10px;
  font-size: 15px;
}
.j1 {
  font-size: 30px;
  font-weight: 300;
}
.jd {
  height: 50px;
  background: rgb(250, 245, 245);
  line-height: 50px;
}
.r1:hover {
  color: orange;
}
.li4:hover{
  transform: scale(1.01);
  transition: all 0.3s linear;
  box-shadow: 0 0 20px #b0b0b0;  
  color: orange;
}
</style>